import React from 'react';
import {connect} from 'dva'
import moment from 'moment'

import Title from 'components/Title'
import Chart from 'components/Chart'

import MyDatePicker from 'components/MyDatePicker'

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const time = moment(now).format('YYYY')

@connect(({quality}) => ({...quality}))
class Analysis extends React.Component {
  constructor(props) {
    super(props);

    let value;
    if ('defaultValue' in props) {
        value = props.defaultValue;
    }

    let chartColumns;
    if ('defaultOption' in props) {
      chartColumns = this.formatAbstractOption(props.defaultOption)
    }

    this.state = {
      value,
      chartColumns,
      time,
    };
  }

  componentDidMount() {
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue){
      if (nextProps.defaultValue){
        this.setState({
          value: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  init = async () => {
    await this.setDateECharts()
  }

  formatAbstractOption = (abstractOption) => {
    const chartColumns = [
      {
        key: 'szzb',
        label: '水质指标分析',
        chart: {
          type: 'Common', dataSource: 'WaterQualityIndicatorsByYearResource',
          columns: {
            seriesItems: [
              { name: '均值', field: 'val', type: 'line' },
              { name: '最小值', field: 'minv', type: 'line' },
              { name: '最大值', field: 'maxv', type: 'line' },
            ],
            xAxis: { field: 'time', format: 'M月', formatStr: 'YYYYMM' },
            yAxis: [{ name: abstractOption['unit'] }],
          },
          color: ["68, 130, 255", "78, 203, 115", "251, 212, 55"],
          other: { showLegend: true },
        },
        server: { type: 'quality/queryWaterQualityIndicatorsByYear', payload: {}},
      },
      {
        key: 'szjc',
        label: '水质检测情况分析',
        chart: {
          type: 'Common', dataSource: 'QualityIndicatorsAnalysisResource',
          columns: {
            seriesItems: [
              { name: '超标次数', field: 'value', type: 'bar' },
              { name: '合格率', field: 'radio', type: 'line', yAxisIndex: 1 },
            ],
            xAxis: { field: 'time', format: 'M月', formatStr: 'YYYYMM' },
            yAxis: [{ name: '次' }, { name: '%'}],
          },
          color: ['78, 203, 115', '251, 212, 55'],
          other: { showLegend: true },
        },
        server: { type: 'quality/queryQualityIndicatorsAnalysis', payload: {}},
      },
      {
        key: 'cbqk',
        label: '超标情况占比分析',
        chart: {
          type: 'Pie', dataSource: 'ExceedingStandardAnalysisResource',
          other: { radius: ['0%', '60%'] },
          columns: { name: '', field: [{name: 'label', value: 'value'}] }
        },
        server: { type: 'quality/queryExceedingStandardAnalysis', payload: {}},
      }
    ]
    return chartColumns;
  }

  // 图表
  setDateECharts = () => {
    const { props } = this;
    const chartColumns = this.formatAbstractOption(props.defaultOption)
    if(Array.isArray(chartColumns)){
      chartColumns.forEach(ele => {
        const { server } = ele;
        if(server) this.queryECharts(server);
      })
    }
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time, value } = this.state;
    let { payload } = server;

    Object.assign(payload, {
      time,
      field: value.join('')
    })
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }

// 图表渲染
RenderECharts = () => {
    const { props } = this;
    const chartColumns = this.formatAbstractOption(props.defaultOption)

    let charts = null;
    charts = chartColumns.map(ele => {
      const { key, label, chart, extra } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;
      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={props[dataSource]}
            extra = {extra}
            other = {other}
          />
        </Title>
      )
    })
    return <>{charts}</>
  }

  // change
  handleChange = (time) => {
    this.setState({
      time
    }, () => {
      this.init()
    })
  }

  render() {
    const { time } = this.state;
    return (
      <div>
        <MyDatePicker
          defaultValue = {time}
          onChange={this.handleChange}
        />
        {this.RenderECharts()}
      </div>
    )
  }
}

export default Analysis;
